<template>
	<view>
		<view class="logo">
			<image src="@/static/img/logo.png" mode=""></image>
		</view>
		<u--input class="search" placeholder="Search for job listings" border="false" v-model="queryParams.search"
			@change="change"></u--input>
		<view class="grid">
			<u-grid :border="false" @click="click">
				<u-grid-item v-for="(baseListItem,baseListIndex) in baseList" :key="baseListIndex"
					style="margin-bottom: 62rpx;">
					<template v-if="baseListItem.show">
						<image class="grid-img" :src="baseListItem.img"></image>
						<text class="grid-text">{{baseListItem.title}}</text>
					</template>
					
				</u-grid-item>
			</u-grid>
		</view>
		<view class="notice">
			<view class="left">
				<image src="@/static/icon-font/notice.png" mode=""></image>
			</view>
			<view class="right">
				<u-notice-bar :text="notice" icon='' direction="column" color=" #222222" bgColor=""></u-notice-bar>
			</view>
		</view>
		<view class="employment">
			<CardItem title="Employment" width="700rpx">
				<template #content>
					<template v-if="recruitList.length!==0" v-for="item in recruitList">
						<ListItem width="700rpx" :title="item.bank_name" :details="item.url"
							@click.native="openWeb(item.url)">
							<template #photo>
								<u-avatar :text="item.bank_name.charAt(0)" fontSize="18"></u-avatar>
							</template>
						</ListItem>
					</template>
					<empty v-if="recruitList.length==0" height="640" text="no Employment"></empty>
				</template>
			</CardItem>
		</view>


	</view>
</template>

<script>
	import common from "@/api/common.js"
	import CardItem from '@/components/basicListItem/paperScraps/paperScraps.vue'
	import ListItem from '@/components/basicListItem/ShadowyListItem/ShadowyListItem.vue'
	export default {
		components: {
			CardItem,
			ListItem
		},
		onLoad(option) {
			this.getNotice()
			this.getRecruitList()
			this.getuserList()
		},
		// 底部上拉刷新
		onReachBottom() {
			if (this.lastPage > 1 && this.queryParams.page <= this.lastPage) { //判断是否还有数据需要加载
				uni.showLoading({
					title: 'Loading'
				});
				setTimeout(function() {
					uni.hideLoading();
				}, 2000);
				this.queryParams.page++
				this.getRecruitList()
			} else {
				uni.showToast({
					title: 'nomoreText',
					icon: 'none'
				});
			}
		},
		data() {
			return {
				userId: '',
				query: {
					page: 1,
				},
				queryParams: {
					page: 1,
					search: ''
				},
				isTeacher:true,
				lastPage: '',
				baseList: [{
						img: '../../static/icon-font/study.png',
						title: 'report',
						show:true
					},
					{
						img: '../../static/icon-font/Friends.png',
						title: 'student',
						show:true
					},
					{
						img: '../../static/icon-font/class.png',
						title: 'notice',
						show:true
					},
					{
						img: '../../static/icon-font/MockTest.png',
						title: 'form',
						show:true
					},
					{
						img: '../../static/icon-font/page.png',
						title: 'finance',
						show:this.$store.state.userDetail.role_name=='student'?false:true
					},
				],
				notice: [],
				recruitList: [],
				timer:null
			}
		},
		methods: {
			//获取notice
			getNotice() {
				common.getNoticeList(this.query).then(res => {
					this.notice = res.data.list.data.map(item => item.content)
				})
			},
			//获取招聘信息
			getRecruitList() {
				common.getRecruitList(this.queryParams).then((res) => {
					if (this.queryParams.page === 1) {
						this.recruitList = res.data.list.data;
					} else {
						this.recruitList = this.recruitList.concat(res.data.list.data);
					}
					this.lastPage = res.data.list.last_page;
				});

			},
			getuserList(){
				common.getUserList(this.queryParams).then((res) => {
				 this.$store.dispatch('userList',res.data.list.data)
				});
			},
			//定时器防抖
			debounce(fn, delay) {
			    clearTimeout(this.timer);
			    this.timer = setTimeout(() => {
					console.log('定时器');
			      fn()
			    }, delay);
			},
			// 搜索
			change(e) {
				this.queryParams.page = 1; // 重置页码为1
				this.recruitList = []; // 清空数组
				this.debounce(this.getRecruitList, 500)
			},
			//点击gird
			click(name) {
				switch (name) {
					case 0:
						uni.navigateTo({
							url: './../report/report'
						});
						break;
					
					case 1:
						uni.navigateTo({
							url: './../friendList/friendList'
						});
						break;
					case 2:
						uni.navigateTo({
							url: './../notice/notice'
						});
						break;
					case 3:
						uni.navigateTo({
							url: './../forms/forms'
						});
						break;
					case 4:
						uni.navigateTo({
							url: './../finance/finance'
						});
						break;
					default:
						break;
				}
			},

			//招聘信息页
			openWeb(href) {
				window.location = href

			}
		}
	}
</script>

<style>
	page {
		background-color: #F5F5F5;
	}

	.logo {
		width: 542rpx;
		height: 90rpx;
	}

	.logo image {
		width: 40%;
		height: 90rpx;
	}

	.search {
		width: 700rpx;
		height: 66rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(174, 174, 174, 0.16);
		border-radius: 100rpx;
		margin: 24rpx 0 42rpx;
	}

	.grid {
		width: 700rpx;
		height: 404rpx;
		box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(174, 174, 174, 0.16);
		border-radius: 20rpx;
		background-color: #fff;
		padding: 40rpx;
	}

	.grid-img {
		width: 84rpx;
		height: 84rpx;
		border-radius: 10rpx;
		margin-bottom: 16rpx;
	}

	.notice {
		width: 700rpx;
		height: 100rpx;
		background: #FDFDFD;
		box-shadow: 0rpx 6rpx 20rpx 2rpx rgba(133, 133, 133, 0.26);
		border-radius: 20rpx;
		margin-top: 22rpx;
		display: flex;
		align-items: center;
		justify-content: space-evenly
	}

	.notice .left {
		width: 52rpx;
		height: 42rpx;
	}

	.notice .left image {
		width: 100%;
		height: 100%;
	}

	.notice .right {
		width: 86%;
	}

	.employment {
		width: 700rpx;
		margin-top: 22rpx;
	}

	.card {
		width: 700rpx;
		margin-top: 22rpx;
	}

	.courses {
		/* display: flex; */
		/* 设置容器为flex布局 */
		/* justify-content: center; */
		/* 水平居中对齐子项目 */
		/* align-items: center; */
		/* 垂直居中对齐子项目 */
		height: 160rpx;
		text-align: center;
		line-height: 160rpx;
		color: #3D3D3D;
	}
</style>